<template>
  <div class="xiecheng">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div class="admin_main_block_left">
          <div>{{ i18n('question.paper.view') }}</div>
        </div>

        <div class="admin_main_block_right">
          <div class="mr10">
            <el-button icon="Back" @click="router.go(-1)">
              {{ i18n('common.return') }}
            </el-button>
          </div>
        </div>
      </div>

      <div class="admin_form_main">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{ i18n('question.paper.statistical.basic_info') }}</span>
            </div>
          </template>
          <div class="text item text-center">
            <el-row :gutter="50">
              <el-col :span="6">
                <el-statistic
                  :title="i18n('question.paper.statistical.answer_total')"
                  :value="dataForm.paper.answer_total"/>
              </el-col>
              <el-col :span="4">
                <el-statistic
                  :title="i18n('question.paper.statistical.answer_time')"
                  :value="dataForm.paper.answer_time">
                  <template #suffix>
                    {{ i18n('common.minute') }}
                  </template>
                </el-statistic>
              </el-col>
              <el-col :span="4">
                <el-statistic
                  :title="i18n('question.paper.statistical.highest_score')"
                  :value="dataForm.paper.highest_score" />
              </el-col>
              <el-col :span="4">
                <el-statistic
                  :title="i18n('question.paper.statistical.average_score')"
                  :value="dataForm.paper.average_score" />
              </el-col>
              <el-col :span="4">
                <el-statistic
                  :title="i18n('question.paper.statistical.lowest_score')"
                  :value="dataForm.paper.lowest_score" />
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card shadow="hover" class="mt10">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{ i18n('question.paper.statistical.visual_info') }}</span>
            </div>
          </template>
          <div class="text item text-center">
            <el-row :gutter="20">
              <el-col :span="12" class="mb20">
                <el-card shadow="never">
                  <v-chart class="chart" :option="correct" :autoresize="true"/>
                </el-card>
              </el-col>
              <el-col :span="12" class="mb20">
                <el-card shadow="never">
                  <v-chart class="chart" :option="error" :autoresize="true"/>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup name="paper-data">
  import { useBase } from "@/hooks/base/useBase"
  import { useForm } from "@/hooks/form/useForm"
  import { use } from 'echarts/core';
  import { PieChart } from 'echarts/charts'; //引入图例
  import { CanvasRenderer } from 'echarts/renderers'; //使用canvas渲染，可选使用svg渲染
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';

  use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer
  ]);

  const { router, query, i18n, isAuth } = useBase()

  const dataForm = reactive({
    paper: {
      answer_total: 0,
      answer_time: 0,
      highest_score: 0,
      average_score: 0,
      lowest_score: 0,
    },
    correct: [],
    error: [],
  })

  const correct = reactive({
    title: {
      text: '试卷试题正确分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    series: {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|正确 {c} 次}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < 100 / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: [],
    },
  });

  const error = reactive({
    title: {
      text: '试卷试题错误分布',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    series: {
      type: 'pie',
      radius: ['40%', '70%'],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|错误 {c} 次}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < 100 / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: [],
    },
  });

  const getPaperData = () => {
    if (query.id) {
      $http({
        url: $http.adornUrl(`/education/paper/statistical/data`),
        method: 'get',
        params: $http.adornParams({
          paper_id: query.id
        }),
      }).then(({ data }) => {
        if (data && data.status === 200) {
          dataForm.paper = data.data
        }
      })
    }
  }

  const getCorrectData = () => {
    if (query.id) {
      $http({
        url: $http.adornUrl('/education/paper/question/statistical/data'),
        method: 'post',
        params: $http.adornParams({
          paper_id: query.id,
          type: 1
        }),
      }).then(({ data }) => {
        if (data && data.status === 200) {
          correct.title.subtext = data.data.title
          correct.series.data = data.data.data
        }
      })
    }
  }

  const getErrorData = () => {
    if (query.id) {
      $http({
        url: $http.adornUrl('/education/paper/question/statistical/data'),
        method: 'post',
        params: $http.adornParams({
          paper_id: query.id,
          type: 2
        }),
      }).then(({ data }) => {
        if (data && data.status === 200) {
          error.title.subtext = data.data.title
          error.series.data = data.data.data
        }
      })
    }
  }

  onMounted(() => {
    getPaperData()

    getCorrectData()
    getErrorData()
  })
</script>

<style scoped>
  .el-col {
    text-align: center;
  }
  .chart {
    height: 50vh;
    background: #fff;
  }
</style>
